<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>隐私设置</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/style.css"/>
    <style>
        html,body{
            /*background: #fff;*/
        }
        .inner_header{
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }
        .content{
            width: 100%;
            margin: 6.9rem 0 0 0;
            float: left;
            box-sizing: border-box;
        }
        .content_list{
            background: #fff;
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 1.3rem 0 1.3rem;
            margin-bottom: 1rem;
        }
        .content_li{
            float: left;
            width: 100%;
            height: 4.45rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.45rem;
        }
        .content_li .onbox{
          width: 4.45rem;
          height: 2.75rem;
          background-color: #ed6a20;
          border-radius: 1.38rem;
          float: right;
          margin-top: 0.95rem;
        }
        .content_li .onbox .zreo{
          border-radius: 50%;
          width: 2.45rem;
          height: 2.45rem;
          background-color: white;
          margin: 0.15rem 0 0.15rem 1.85rem;
        }
        .content_list .content_li:last-child{
            border-bottom: none;
        }
        .content_li span{
            float: right;
            margin: 0 1.3rem 0 0;
            color: #a1a1a1;
        }
        .luck{
          margin: 0.15rem 0 0 0.15rem;
          border-radius: 50%;
          width: 2.45rem;
          height: 2.45rem;
          background-color: white;
        }
    </style>
</head>
<body>
<div id="app">
    <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
        <a class="aui-pull-left aui-btn" onclick="goBack()">
            <img src="../../../image/back.png">
        </a>
        <div class="aui-title">隐私设置</div>
    </header>
    <div class="content">
        <div class="content_list">
            <div class="content_li">
                允许给我推荐通讯录好友
                <div class="onbox">
                  <div class="zreo" @click="clickZreo" ref="refpos"></div>
                </div>
            </div>
            <div class="content_li">
                允许通过手机号搜到我
                <div class="onbox">
                  <div class="zreo"  @click="clickZreo2" ref="refpos2"></div>
                </div>
            </div>
            <div class="content_li">
                黑名单
                <div class="onbox">
                  <div class="zreo"  @click="clickZreo3" ref="refpos3"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../script/utils.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../script/aui-pull-refresh.js"></script>

<script type="text/javascript">

    apiready = function(){
    //setRefresh()
    }
    function goBack() {
      api.closeWin({

      });
    }
      //刷新
    function setRefresh(){
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {
            if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
            }
        })
    }
    new Vue({
      el:"#app",
      data:{

      },
      methods:{
        clickZreo:function(){
          if(this.$refs.refpos.className=="zreo"){
              this.$refs.refpos.className="luck"
          }else if(this.$refs.refpos.className=="luck"){
              this.$refs.refpos.className="zreo"
          }
        },
        clickZreo2:function(){
          if(this.$refs.refpos2.className=="zreo"){
              this.$refs.refpos2.className="luck"
          }else if(this.$refs.refpos2.className=="luck"){
              this.$refs.refpos2.className="zreo"
          }
        },
        clickZreo3:function(){
          if(this.$refs.refpos3.className=="zreo"){
              this.$refs.refpos3.className="luck"
          }else if(this.$refs.refpos3.className=="luck"){
              this.$refs.refpos3.className="zreo"
          }
        }
      }
    })
</script>
